<template>
    <view class="page-content">
        <navbar fixed title="商城" shadow></navbar>
		<!--<view @click="choseWallet" class="view flex-row align-center justify-between w104 h30 m-r-10 m-b-15 m-l-20" style="background:#6781FF;border-radius: 15px;">
		        <view class="fz-12 c-fff p-l-10 ">{{Object.keys(defaultWallet).length > 0 ? defaultWallet.name : '未创建钱包'}}</view>
		        <view class="w20 h20 bg-fff view align-center justify-center m-r-5" style="border-radius:50%;">
		            <uni-icons type="right" size="12" color="#748FAC"/>
		        </view>
		</view>-->
        <view class="m-t-10">
			<view class="view flex-row align-center justify-center">
				<uswitch class="w266 h42 m-b-10 " :switchList="['NFT商城', '产品商城']" :w="'500rpx'" :h="'84rpx'" @change="changeSwitch"/>
			</view>
            
            <view class="bg_678 m-auto  h166 rel bg-cover" :style="`width:calc(100vw - 40rpx);border-radius: 10px;overflow: hidden;background-image:url(${bannerInfo.url});`">
                 <view class="h55 abs justify-between view flex-row align-center   m-b-13 bg-000 width100" >
                        <view class="m-l-10">
                            <view class="c-fff fz-12 m-b-3">{{ bannerInfo.title }}</view>
                            <view class="view flex-row align-center">
                                <view class="fz-12 c_4e6 bold m-r-4">{{ bannerInfo.content }}</view>
                                <!--<image src="/static/img4/fire.png" class="w16 h16 m-r-5"/>
                                <image src="/static/img4/fire.png" class="w16 h16 m-r-5"/>
                                <image src="/static/img4/fire.png" class="w16 h16 "/>-->
                            </view>
                        </view>
                        <view v-if="bannerInfo.goods_id"  @click="toShopDetail(bannerInfo.goods_id)" class="bg_91a c-fff view align-center justify-center h30 w120 m-r-10" style="border-radius:10px;">购买</view>
                </view>
            </view>

            <view class="m-l-20 m-r-20">
				<view class="bold c-0D1 fz-16 m-b-13 m-t-13">热门商户</view>

				<view class="view flex-row align-center justify-center m-b-20">
					<view class="flex-1 view align-center justify-center" v-for="(item,index) in shopList" :key="index" @click="toShopInfo(item)">
						<image class="w44 h44 m-b-10" :src="item.icon_url"></image>
						<view class="c-0D1 fz-12">{{ item.name }}</view>
					</view>
				</view>

				<view class="view flex-row align-center flex-wrap m-auto" style="width:calc(100vw - 40rpx);">
					<view class="m-b-15 list-item" style="width:calc(50% - 40rpx);" v-for="(item,index) in NFTShopList" :key="index" @click="toShopDetail(item.id)">
						<image class="bg_678 m-b-10 width100 h145 bg_678 bg-cover" :style="`border-radius:20rpx;background-image:url(${item.nftData.image});`"></image>
						<view class="fz-14 c-122 bold line2" style="min-height:40rpx;">{{ item.nftData.nft_name }}</view>
						<view style="color:red;" class="fz-12">{{item.nftData.price}} YPT</view>
					</view>
				</view>
            </view>
        </view>
    </view>
</template>

<script>
import {mapState, mapGetters} from 'vuex';
import navbar from '@/components/uni-nav-bar'
import uniIcons from '@/components/uni-icons/uni-icons.vue'
import uniEasyinput from '@/components/uni-easyinput/uni-easyinput'
import { getBannerList, getShops, getNFTShopList } from '@/apis/shop'
import elButton from '@/components/el-button/el-button'
import noData from '@/components/noData/noData'
import sibList from '@/components/sib-list/sib-list.vue'
import uswitch from '@/components/uni-switch/index.vue'

export default {
    components: {
      navbar,
      uniEasyinput,
      uniIcons,
      uswitch
	},
    data() {
        return {
			val: true,
			bannerInfo: {},
			shopList: [],
			NFTShopList: [],
        }
    },
	computed: {
	},
	async onLoad() {
	  uni.showLoading();
	  await this.getNFTList()
	  await this.getBanner()
	  await this.getShopList()
	  uni.hideLoading();
	},
    methods: {
		toShopInfo(item) {
			//分类页有BUG，暂不开放
			return 
			uni.navigateTo({
				url: `/pages/shop/category?shopName=${item.name}&merchants_id=${item.id}`
			})
		},
		toShopDetail(id) {
			uni.navigateTo({
				 url: `/pages/shop/goodsDetail?nft_id=${id}`
			});
		},
		changeSwitch(val) {
			console.log(val)
		},
		async getNFTList() {
			const res = await getNFTShopList()
			this.NFTShopList = res.data
		},
		
		async getBanner() {
			const res = await getBannerList()
			this.bannerInfo = res.data[0]
		},
		async getShopList() {
			const res = await getShops()
			this.shopList = res.data.filter( (item,index) => index <5).map( item => {
					 item.icon_url = item.icon_url ? item.icon_url:require('@/static/v2.png')
					return item
			})
		}
    }
    
}
</script>

<style lang="scss" scoped>
.bar1-title {
    color:#3C3C3C;
    font-size: 32rpx;
}
.abs {position: absolute;bottom: -26rpx;left: 0;}
page {
    background: #F6F6F6;
}
.left-bar-item {width: 100%;height:68px;display: flex;align-items: center;justify-content: center;}
.left-bar-item .image{
    width:30px;
    height: 30px;
}
.left-bar-item.active {
    background: #F6F6F6;
}
.list-item:nth-child(odd) {margin-right: 30rpx;}
.btn-c {
    display: block;
    margin-top:56rpx;
    width: 100%;
    height: 96rpx;
    line-height: 78rpx;
    font-size: 40rpx;
}
.popupCenter,.popupsCenter,.popupCenters{
		position: fixed;
		top: 34%;
		left:10%;
		right:50%;
		width: 600rpx;
		margin: 0 auto;
		// height: 360rpx;
		border-radius: 20rpx;
		color: #333;
		background: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		.center_title{
			width: 100%;
			text-align: center;
			margin: 20rpx auto;
			font-size: 36rpx;
			color: #333333;
			font-weight:700;
		}
		.center_content{
			width: 80%;
			text-align: center;
			margin: 20rpx auto;
			margin-bottom: 34rpx;
			// font-size: 38rpx;
		}
		.center_button{
			width: 98%;
			height: 100rpx;
			margin: 0 auto;
			margin-top: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #ffffff;
			// border-top: #dddddd;
			button{
				background: #ffffff;

				width: 48%;
				font-size: 34rpx;
				// border:#FFFFFF solid 1rpx;
			}
			.btn1{
				height: 90rpx;
				text-align: center;
				line-height: 90rpx;
				background: #ffffff;
				width: 100%;
				border-top:#ddd solid 1rpx;
				// border-right:#ddd solid 1rpx;
				border-bottom-left-radius: 20rpx;
			}
			.btn2{
				overflow: hidden;
				height: 90rpx;
				text-align: center;
				line-height: 90rpx;
				background: #ffffff;
				width: 100%;
				border-top:#ddd solid 1rpx;
				border-left:#ddd solid 1rpx;
				border-bottom-right-radius: 20rpx;
				color: #634DFF;
			}
		}

	}
	.popupsCenter{
		width: 600rpx;
		// height: 690rpx;
		top: 20%;
		left:10%;
		right:50%;
		.center_title{
			width: 100%;
			text-align: center;
			margin: 0 auto;
			margin-top: 30rpx;
			margin-bottom: 14rpx;
			font-size: 38rpx;
			color: #333333;
		}
		.center_text{
			width: 100%;
			// height: 70%;
			margin: 60rpx auto;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			input{
				width: 80%;
				margin: 0 auto;
				font-size: 30rpx;
				color: #AAAAAA;
				height: 70rpx;
				border-bottom: 2rpx solid #ddd;
				margin-bottom: 30rpx;
			}
			.text-right{
				text-align: right;
				width: 80%;
				font-size: 26rpx;
				color: #5D5FFC;
				margin-top: -24rpx;
			}
		}
		.tips{
			width: 80%;
			color: #848484;
		}
		.input-frame{
			display: flex;
			justify-content: space-between;
			padding-bottom: 20rpx;
			border-bottom: 2rpx solid #aaa;
			.input-input{
				flex: 1;
				font-size: 30rpx;
				padding-right: 14rpx;
			}
			.input-btn{
				font-size: 30rpx;
				color: #5D5FFC;
			}
		}
	}
	// .popupCenters{
	// 	// height: 290rpx;
	// }
.fix-bottom {width: 100vw;height: 100px;background: #fff;bottom: 0;left: 0;padding-top:32rpx;position: fixed;}
</style>
